<template>
	<view class="longbingbing-service-list-item">
		<block>
			<view @tap.stop="goDetail" class="longbingbing-service-item flex-warp" v-if="o.type===1">
				<!-- #ifdef H5 -->
				<view class="cover radius-16">
					<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${info.cover}')`}">
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
				<!-- #endif -->

				<view class="flex-1 ml-md" :style="{maxWidth:maxWidth}">
					<view :class="[{'flex-between':info.show_salenum}]" style="height:38rpx">
						<view class="f-mini-title c-title text-bold ellipsis" :class="[{'max-270':info.show_salenum}]">
							{{ info.title }}
						</view>
						<view class="f-caption c-caption" v-if="info.show_salenum">
							已售{{ info.total_sale | handleFormatNum}}
						</view>
					</view>
					<view class="f-caption c-caption ellipsis"
						:style="{margin:info.member_price?'6rpx 0 0 0':'10rpx 0'}">
						{{ info.sub_title || '' }}
					</view>
					<view class="flex-y-center f-caption c-caption">
						<i class="iconfont iconshijian" style="font-size:24rpx;margin-right: 5rpx;"
							:style="{color:primaryColor}"></i>{{info.time_long}}分钟
					</view>
					<view class="flex-y-end" :style="{marginTop:info.member_price ?'':'16rpx'}">
						<view class="flex-1">
							<view class="flex-y-center f-desc c-caption ellipsis"
								:style="{width:from == 'technician-info' ?'280rpx':attendant_name.length===5?'220rpx':attendant_name.length===4?'240rpx':attendant_name.length===3?'260rpx':'280rpx'}">
								<view class="flex-y-baseline f-icontext c-warning mr-sm">¥<view class="f-sm-title">
										{{ info.price }}
									</view>
									<view class="f-caption" v-if="info.show_unit">/{{info.show_unit}}</view>
								</view>
								<view class="member-canbuy-level" v-if="info.member_info && info.member_info.title">
									<view class="text flex-center">{{info.member_info.title}}专享</view>
								</view>
							</view>
							<view class="flex-y-center f-paragraph c-title" style="height: 30rpx;"
								v-if="info.member_price">
								<view class="flex-y-baseline">¥<view class="text-bold">{{ info.member_price }}</view>
								</view>
								<view class="memberdiscount-price flex-center ml-sm">
									会员价
								</view>
							</view>
						</view>
						<auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
							:style="{width:from == 'technician-info' ?'140rpx':attendant_name.length===5?'203rpx':attendant_name.length===4?'182rpx':attendant_name.length===3?'161rpx':'140rpx'}">
							<view class="flex-between">
								<view></view>
								<view class="item-btn flex-center f-caption c-base"
									:style="{ background: primaryColor }">
									{{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}`}}
								</view>
							</view>
						</auth>
					</view>
				</view>
			</view>

			<view @tap.stop="goDetail" class="longbingbing-service-item-2 flex-warp" v-if="o.type===2">
				<view class="cover rel">
					<!-- #ifdef H5 -->
					<view class="cover">
						<view class="h5-image cover" :style="{ backgroundImage : `url('${info.cover}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image mode="aspectFill" lazy-load class="cover" :src="info.cover"></image>
					<!-- #endif -->
					<view class="time-long flex-center abs">
						<view class="time-text">{{ info.time_long }}分钟</view>
					</view>
					<view class="price flex-center c-base abs">
						<view class="flex-y-baseline">
							<view class="f-icontext">¥</view>
							<view class="f-mini-title">{{ info.price }}</view>
						</view>
					</view>
				</view>
				<view class="flex-1 ml-md" style="width: 478rpx">
					<view class="flex-between">
						<view class="f-mini-title c-title text-bold ellipsis">
							{{ info.title }}
						</view>
						<view class="can-service-btn md flex-center rel">
							<view class="bg abs" :style="{ background: primaryColor }"></view> <span
								class="text flex-center abs" :style="{ color: primaryColor }"> 可预约 半小时内 </span>
						</view>
					</view>
					<view class="flex-between">
						<view class="f-icontext mt-sm mb-sm ellipsis" style=" color: #5a677e"
							:style="{ maxWidth: $t('action.attendantName').length > 3 ? '200rpx' : '' }">
							{{ info.sub_title || '' }}
						</view>
						<view class="distance f-icontext flex-y-center">
							<view class="text-bold">
								最近{{ $t('action.attendantName') }}
							</view>
							<i class="iconfont iconjuli1"></i>附近
						</view>
					</view>
					<view class="flex-y-center f-paragraph c-title" style="height: 30rpx;" v-if="info.member_price">
						<view class="flex-y-baseline">¥<view class="text-bold">{{ info.member_price }}</view>
						</view>
						<view class="memberdiscount-price flex-center ml-sm">
							会员价
						</view>
					</view>
					<view class="flex-between" :style="{ marginTop:  info.member_price?'10rpx' : '12rpx'}">
						<view class="flex-y-center" style="min-height:52rpx">
							<view class="flex-warp"
								:style="{ maxWidth: from == 'technician-info' ?'300rpx': $t('action.attendantName').length === 3 ? '280rpx' : $t('action.attendantName').length === 4 ? '250rpx' : $t('action.attendantName').length === 5 ? '220rpx' : '300rpx' }"
								v-if="info.position_title&&info.position_title.length>0">
								<view class="tag-item flex-center"
									:style="{ color: primaryColor, borderColor: primaryColor }"
									v-for="(aitem, aindex) in info.position_title" :key="aindex"> {{ aitem }} </view>
							</view>
						</view>
						<auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
							:style="{width:from == 'technician-info' ?'140rpx': attendant_name.length===5?'203rpx':attendant_name.length===4?'182rpx':attendant_name.length===3?'161rpx':'140rpx'}">
							<view class="flex-between">
								<view></view>
								<view class="item-btn flex-center f-caption c-base"
									:style="{ background: primaryColor }">
									{{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}`}}
								</view>
							</view>
						</auth>
					</view>
				</view>
			</view>

			<view @tap.stop="goDetail" class="longbingbing-service-item-3" v-if="o.type===3">
				<view class="cover rel">
					<!-- #ifdef H5 -->
					<view class="cover">
						<view class="h5-image cover" :style="{ backgroundImage : `url('${info.cover}')`}">
						</view>
					</view>
					<!-- #endif -->
					<image mode="aspectFill" lazy-load class="cover" :src="info.cover"></image>
					
					<!-- <view class="vip-canbuy pl-md flex-y-center f-icontext c-base abs"
						v-if="info.member_info && info.member_info.title">
						<image class="canbuy-img abs" :src="`${base_img_url}/menu2/vip-canbuy.png`">
						</image>
						{{info.member_info.title}}专享
					</view> -->
					<!-- <view class="time-long flex-center f-icontext c-base abs">
						<i class="iconfont iconshijian4"></i>{{ info.time_long }}分钟
					</view> -->
				</view>
				<view style="padding: 16rpx">
					<!-- <view class="f-title text-bold ellipsis" style="color: #222724"> -->
					<view class="f-title text-bold ellipsis" style="color: #336666">
						{{ info.title }}
					</view>
					<view class="f-caption mt-sm mb-sm ellipsis" style="height: 30rpx; color: #898888;">
						{{ info.sub_title || '' }}
					</view>
					<view class="f-icontext" style="color: #898888; margin-top: 12rpx;height:32rpx">
						<block v-if="info.show_salenum">销量{{ info.total_sale | handleFormatNum}}</block>
					</view>
					<view class="flex-center mt-sm" :style="{height: info.member_price ? '28rpx':'8rpx'}">
						<view class="vip-price flex-center" v-if="info.member_price">
							<view class="text flex-center c-base">会员价</view>
							<view class="price flex-center flex-y-baseline text-bold">
								<!-- ¥ -->
								<view class="num">{{ info.member_price }}</view>
							</view>
						</view>
						<view class="flex-1"></view>
					</view>
					<view class="flex-between">
						<view class="flex-y-center ellipsis" style="max-width: 170rpx">
							<view class="flex-y-baseline f-paragraph" style="color: #336666;margin-top: 10rpx;">
								<!-- ¥ -->
								<view style="font-size: 18px">{{ info.price }}</view>
								<view class="f-caption" v-if="info.show_unit">/{{info.show_unit}}</view>
							</view>
							<!-- 	<view class="f-caption text-delete" style="color: rgba(34, 39, 36, 0.38); margin-left: 8rpx">
							¥{{ info.init_price }}
						</view> -->
						</view>
						<auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="goDetail" :style="{width:'130rpx'}">
							<view class="item-btn flex-center f-caption c-base radius"
								:style="{ background: '#336666' }">
								<view class="flex-center">立即预约</view>
							</view>
						</auth>
					</view>
				</view>
			</view>

			<view @tap.stop="goDetail" class="flex longbingbing-service-item-4 radius-16 fill-base" v-if="o.type===4">
				<!-- #ifdef H5 -->
				<view class="cover radius-16">
					<view class="h5-image radius-16" :style="{ backgroundImage : `url('${info.cover}')`}">
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image mode="aspectFill" lazy-load class="cover radius-16" :src="info.cover"></image>
				<!-- #endif -->

				<view class="flex-1 ml-md">
					<view class="f-mini-title c-title text-bold ellipsis max-450">
						{{ info.title }}
					</view>
					<view class="mt-sm service-time rel">
						<image class="abs bg"
							:src="`https://www.peikangbao.cn/admin/anmo/technician/service-time-bg.png`"
							mode="widthFix"></image>
						<view class="rel flex-y-center">
							<image class="time"
								:src="`https://www.peikangbao.cn/admin/anmo/technician/service-time.png`"
								mode="aspectFill"></image>
							<view class="f-icontext c-base flex-center time-text">{{info.time_long}}分钟</view>
							<view class="f-icontext ml-lg salenum" style="color: #FB766B;" v-if="info.show_salenum">
								已售{{info.total_sale | handleFormatNum}}</view>
						</view>
					</view>
					<view class="f-caption c-caption ellipsis max-450" style="margin-top: 16rpx;">
						{{ info.sub_title || '' }}
					</view>
					<!-- <view class="flex-y-center f-caption c-caption"><i class="iconfont iconshijian"
							style="font-size:24rpx;margin-right: 5rpx;"
							:style="{color:primaryColor}"></i>{{info.time_long}}分钟
					</view> -->
					<view class="mt-sm"
						:class="[{'flex-y-center':!info.member_price},{'flex-y-end':info.member_price}]">
						<view class="flex-1">
							<view class="flex-y-center f-desc c-caption ellipsis"
								:style="{width:from == 'technician-info' ?'280rpx':attendant_name.length===5?'220rpx':attendant_name.length===4?'240rpx':attendant_name.length===3?'260rpx':'280rpx'}">
								<view class="flex-y-baseline f-icontext c-warning mr-sm">¥<view class="f-sm-title">
										{{ info.price }}
									</view>
									<view class="f-caption" v-if="info.show_unit">/{{info.show_unit}}</view>
								</view>
								<view class="member-canbuy-level" v-if="info.member_info && info.member_info.title">
									<view class="text flex-center">{{info.member_info.title}}专享</view>
								</view>
							</view>
							<view class="flex-y-center f-paragraph c-title" style="height: 30rpx;"
								v-if="info.member_price">
								<view class="flex-y-baseline">¥<view class="text-bold">{{ info.member_price }}</view>
								</view>
								<view class="memberdiscount-price flex-center ml-sm">
									会员价
								</view>
							</view>
						</view>
						<auth :needAuth="!userInfo || (userInfo && (!userInfo.phone || !userInfo.nickName))"
							:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toChoose"
							:style="{width:from == 'technician-info' ?'168rpx':attendant_name.length===5?'203rpx':attendant_name.length===4?'182rpx':attendant_name.length===3?'161rpx':'168rpx'}">
							<view class="flex-between">
								<view></view>
								<view class="item-btn flex-center f-caption c-base"
									:style="{ background: primaryColor }">
									{{ from == 'technician-info' ? `立即预约` : `选择${$t('action.attendantName')}`}}
								</view>
							</view>
						</auth>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		props: {
			o: {
				type: Object,
				default () {
					return {}
				}
			},
			from: {
				type: String,
				default () {
					return 'list'
				}
			},
			store_id: {
				type: Number,
				default () {
					return 0
				}
			},
			coach_info: {
				type: Object,
				default () {
					return {}
				}
			},
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			maxWidth: {
				type: String,
				default () {
					return '430rpx'
				}
			}
		},
		data() {
			return {

			}
		},
		computed: mapState({
			plugAuth: state => state.config.configInfo.plugAuth,
			attendant_name: state => state.config.configInfo.attendant_name,
		}),
		methods: {
			// 详情
			goDetail() {
				let {
				 	id,
					title
				} = this.info
				// let {
				// 	store_id = 0,
				// 		coach_info = {
				// 			id: 0,
				// 			is_work: 0
				// 		}
				// } = this
				// let {
				// 	id: coach_id = 0,
				// 	is_work = 0
				// } = coach_info
				// let url = `/user/pages/detail?id=${id}&store_id=${store_id}&coach_id=${coach_id}&is_work=${is_work}`
				// this.$util.goUrl({
				// 	url
				// })
				console.log(this.info, 'this.info')
				// let url = this.info.link[0].url
				let url = `/userA/pages/order-detail?id=${id}&title=${title}`
				
				this.$util.goUrl({
					url
				})
				
			},
			// 选择技-师
			toChoose() {
				let {
					can_buy,
					title
				} = this.info.member_info
				if (!can_buy) {
					let msg = title ? title.includes('会员') ? title : `${title}会员` : '会员'
					this.$util.showToast({
						title: `您还不是${msg}`
					})
					return
				}
				let {
					from
				} = this
				if (from == 'technician-info') {
					this.$emit('order')
					return
				}
				let {
					id
				} = this.info
				let {
					store_id = 0
				} = this
				let url = `/user/pages/choose-technician?id=${id}&store_id=${store_id}`
				this.$util.goUrl({
					url
				})
			},
			toEmit(key) {
				this.$emit(key)
			}
		},
		filters: {
			handleFormatNum(val) {
				let text = val
				if (val > 9999) {
					let num = val % 10000
					let num1 = parseInt(val / 10000)
					if (num) {
						text = `${num1}w+`
					} else {
						text = `${num1}w`
					}
				}
				return text
			}
		}
	}
</script>

<style scoped lang="scss">
	.longbingbing-service-list-item {

		.longbingbing-service-item {
			.cover {
				width: 200rpx;
				height: 200rpx;
			}

			.time-long {
				min-width: 72rpx;
				height: 30rpx;
				padding: 0 5rpx;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFEEB9;
				margin-right: 16rpx;
			}

			.f-icontext {
				font-size: 18rpx;
			}

			.text-delete {
				font-size: 20rpx;
				color: #B9B9B9;
			}

			.item-btn {
				min-width: 130rpx;
				height: 52rpx;
				padding: 0 15rpx;
				border-radius: 8rpx;
			}
		}


		.longbingbing-service-item-2 {
			border-radius: 16rpx;

			.cover {
				width: 198rpx;
				height: 198rpx;
				border-radius: 16rpx;
				object-fit: cover;
			}

			.time-long {
				top: 0;
				left: 0;
				min-width: 84rpx;
				height: 32rpx;
				background: linear-gradient(270deg, #4c545a 0%, #282b34 100%);
				border-radius: 16rpx 0 16rpx 0;
				color: #ffeeb9;

				.time-text {
					font-size: 24rpx;
					transform: scale(0.8);
				}
			}

			.price {
				bottom: 0;
				right: 0;
				min-width: 104rpx;
				height: 40rpx;
				padding: 0 10rpx;
				background: #fd6951;
				border-radius: 16rpx 0 16rpx 0;

				.f-icontext {
					margin-right: 4rpx;
				}
			}

			.ellipsis {
				max-width: 240rpx;
			}

			.can-service-btn {
				min-width: 160rpx;
				height: 34rpx;
				border-radius: 6rpx;

				.bg {
					width: 100%;
					height: 34rpx;
					opacity: 0.1;
					border-radius: 6rpx;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.text {
					width: 200rpx;
					transform: scale(0.7);
				}
			}

			.can-service-btn.md {
				min-width: 168rpx;

				.text {
					width: 208rpx;
				}
			}

			.distance {
				color: #7f7f7f;
				font-size: 20rpx;

				.iconjuli1 {
					font-size: 22rpx;
					margin-left: 8rpx;
				}
			}

			.tag-item {
				min-width: 40rpx;
				height: 36rpx;
				padding: 0 10rpx;
				font-size: 20rpx;
				border-radius: 8rpx;
				border: 1rpx solid #fff;
				margin: 6rpx 10rpx 6rpx 0;
				transform: rotateZ(360deg);
			}

			.item-btn {
				min-width: 130rpx;
				height: 52rpx;
				border-radius: 8rpx;
				padding: 0 15rpx;
			}
		}

		.longbingbing-service-item-3 {
			width: 345rpx;
			height: auto;
			background: #ffffff;
			box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.06),
				0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;

			.cover {
				width: 100%;
				height: 240rpx;
				// height: 172rpx;
				border-radius: 24rpx 24rpx 0 0;
			}

			.vip-canbuy {
				bottom: 0;
				width: 100%;
				height: 46rpx;
				background: linear-gradient(270deg, #E32C08 0%, #F84E2C 100%);

				.canbuy-img {
					top: 0;
					right: -1rpx;
					width: 126rpx;
					height: 48rpx;
				}
			}

			.time-long {
				top: 16rpx;
				left: 16rpx;
				min-width: 116rpx;
				height: 40rpx;
				padding: 0 10rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 8rpx;

				.iconfont {
					font-size: 24rpx;
					margin-right: 6rpx;
				}
			}

			.vip-price {
				display: flex;
				align-items: center;
				.text {
					display: inline-block;
					height: 34rpx;
					border: 1rpx solid #336666;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 10rpx 0 0 10rpx;
					background:#336666;
					text-align: center;
					padding: 0 5rpx;
				}
				.price {
					display: flex;
					align-items: center;
					height: 34rpx;
					border: 1rpx solid #336666;
					margin-left: 5rpx;
					text-align: center;
					padding: 0 10rpx;
					color: #336666;
					font-size: 22rpx;
					border-radius: 0 10rpx 10rpx 0;
				}
			}

			.item-btn {
				min-width: 130rpx;
				height: 48rpx;
				border-radius: 8rpx;
				padding: 0 15rpx;
			}

			.radius {
				border-radius: 800rpx;
			}
		}

		.longbingbing-service-item-4 {
			padding: 28rpx 30rpx 28rpx 0;
			margin-left: 36rpx;

			.cover {
				width: 180rpx;
				height: 216rpx;
				margin-left: -36rpx;
			}

			.h5-image {
				width: 180rpx;
				height: 216rpx;
			}

			.service-time {
				width: 281rpx;
				height: 34rpx;

				.bg {
					width: 281rpx;
					height: 34rpx;
					left: 0;
					top: 0;
				}

				.time {
					width: 23rpx;
					height: 30rpx;
					margin-left: 9rpx;
				}

				.time-text {
					min-width: 80rpx;
					height: 34rpx;
				}

				.salenum {
					height: 34rpx;
					line-height: 34rpx;
				}
			}

			.time-long {
				min-width: 72rpx;
				height: 30rpx;
				padding: 0 5rpx;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFEEB9;
				margin-right: 16rpx;
			}

			.text-delete {
				font-size: 20rpx;
				color: #B9B9B9;
			}

			.item-btn {
				min-width: 168rpx;
				height: 68rpx;
				padding: 0 15rpx;
				border-radius: 16rpx;
			}
		}
	}
</style>